<template>
	<el-button  :id="'zhDownExcel' + columnId" @click="onClick" :loading="myLoading" :disabled="myDisabled" :type="myType">
		<template v-if="myIcon" #icon>
			<SvgIcon :name="myIcon" />
		</template>
    <slot>{{ myText }}</slot>
	</el-button>
</template>
<script lang="ts" setup name="zhDownloadExcel">
import { useRequest } from 'vue-request';
// 定义属性
const prop = defineProps({
	// 数据相关
	columnId: {
		// 字段ID、控件ID，用途非常广
		type: [Number, String],
		default: () => Math.floor(Math.random() * 1000000 + 1), // new Date().valueOf()
	},
  //模版编号
  modelCode: String,
  params: {
    type: Object,
    default: () => {},
  },
  //模版版本
  version: String,
  //下载的功能编号
  funcCode: String,
  //下载的url
  url: String,
	//按钮文本
	text: String,
  showIcon: {
		type: Boolean,
		default: true,
	},
	loading: {
		type: Boolean,
		default: false,
	},
  disabled: {
		type: Boolean,
		default: false,
	},
	icon: [String, Object],
	type: {
		type: String,
	},
});
const myText = ref(prop.text);
let myLoading = ref(prop.loading);
let myDisabled = ref(prop.disabled);
const myIcon = ref(prop.icon);
if(prop.showIcon){
  if(!myIcon.value){
    myIcon.value='ele-Download'
  }
}
const myType: any = ref(prop.type||'primary');

const onClick = async () => {
	downloadRun();
};
//下载
const downloadAction =  () => {
  let funcCode=prop.funcCode;
  if(!prop.funcCode){
    funcCode="excelModel0008"
  }
  let params={modelCode:prop.modelCode,excelVersion:prop.version,params:prop.params}
  return $api.common.send.post('excelModel0001', params).then((res) => {
    let info=res.result
		let data={modelCode:prop.modelCode,excelVersion:prop.version,params:prop.params}
    let fileName=info.modelName+"("+info.excelVersion+")"+"."+(info.excelType||'xls')
    if(prop.url){
      $api.common.download.postUrl(prop.url,data,fileName);
    }else{
      $api.common.download.post(funcCode,data,fileName);
    }
    
	});
 
};
const { run: downloadRun, loading: downLoading } = useRequest(downloadAction, {
	manual: true,
	debounceInterval: 2000,
	debounceOptions: {
		leading: true,
		maxWait: undefined,
		trailing: false,
	},
});
watch(
	() => downLoading.value,
	(val) => {
		myLoading.value = val;
    myDisabled.value = val;
	}
);
watch(
	() => prop.icon,
	(val) => {
		myIcon.value = val;
	}
);
watch(
	() => prop.type,
	(val) => {
		myType.value = val;
	}
);

</script>
<style lang="scss" scoped></style>
